*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    /*user-select: none;*/
    //font-family
    /*font-size:1vw;*/
}
.darkBg{
    background-color: var(--theme-bgColor-aside-nav);
}
.darkFont{
    color: var(--theme-fontMain);
}

#follow-community{
    background-color: var(--theme-bgColor-aside-nav);
    transition: background-color 0.2s ease-in-out;
}
.dot{
    color: var(--theme-fontMain);
}
#Aside{

    .labInfo{
        background-color: var(--theme-labInfo);
        color: var(--theme-bgColor-aside-nav);
    }
    p{
            color: var(--theme-fontMain);

    }
}
html,body{
    /*height: 100vh;*/
    width: 100%;
    margin: 0;
    background-color: var(--theme-bgColor);
    overflow-y: hidden;
    overflow-x : hidden;
    /*user-select:none;*/
    /*font-family: 苹方-简, serif;*/
    /*width:calc(100% -8px);*/
    /*word-wrap:break-word;*/
    /*word-break:break-all;*/
    white-space:nowrap;
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
    transition: background-color 0.2s ease-in-out;
}
a{
    color: var(--theme-fontMain);
    text-decoration: none;
    display: block;
    border: none;
}
#walContent{
    a{
        color: black;
    }
}

::selection {
    color: #fff;
    background: #9e5bdf;
}
img{
    user-select: none;
}
#nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 3.125rem;
    background-color: var(--theme-bgColor-aside-nav);
    /*overflow: hidden;*/
    position: absolute;
    z-index: +1;
    box-shadow: 0 1px 2px var(--theme-boxShadow);
    transition: all 0.2s ease-in-out;
}
#discussMainBox{
    #InfoGame{
        color: var(--theme-fontMain);
    }
    background-color: var(--theme-userContent);
}
#mainSayWindow{
    #sayContent{
        pre{
            color: var(--theme-fontMain);
        }
        background-color: var(--theme-button);

    }
    #userInfo{
        color: var(--theme-fontMain);
    }
    backdrop-filter: blur(50px);
}
#discussUser{
    background-color: var(--theme-userBox);
    span{
        color: var(--theme-fontMain);
    }
}
#openMore{
    ul{
        background-color: var(--theme-bgColor-aside-nav);
        color: var(--theme-fontMain);
        li:hover{
            color: var(--theme-fontMain);
            background-color: var(--theme-button);
        }
    }
}
#searchContent{
    .labInfo{
        background-color: var(--theme-labInfo);
        color: var(--theme-labInfo-fontColor);
    }
    background-color: var(--theme-bgColor-aside-nav);
    p{
        color: var(--theme-fontMain);
    }
    li:hover{
        background-color: var(--theme-button);
    }
#searchRes{
    color: var(--theme-fontMain);
}
}

#nav #nav-left{
    display: flex;
    align-items: center;

}
#nav #nav-left #community-icon{

    width: 3.125rem;
    height: 3.125rem;
    background-color: var(--theme-bgColor);
    transition: all 0.2s ease-in-out;
    /*position: absolute;*/
}
#nav #nav-left  #community-hot{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    /*width: 120px;*/
    /*height: 50px;*/
    /*background-color: #575757;*/
    padding: 0 1.5rem;
    /*margin-left: 50px;*/
}
#nav #nav-left span{
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--theme-fontMain);
}
#recommend-1,#recommend-2{
    display: flex;
    justify-content: center;
    align-items: center;
    /*width: 50px;*/
    /*height: 50px;*/
    padding: 0 1.25rem 0 1.25rem;
    /*background-color: #7a98ef;*/
}
#community-search{
    margin: 0 50px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
#community-search #input-box{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    #inputContent{
        background-color: var(--theme-search);
        color: var(--theme-fontMain);

    }
    ::-webkit-input-placeholder{
        color: var(--theme-fontSec);
    }
    /*background-color: #ababab;*/
}

.pos-rea{
    position: relative;
}
.pos-abs{
    position: absolute;
}
#community-search #input-box input{
    border: 0;
    outline: none;
    width: 100%;
    height: 30px;
    font-size: 0.875rem;
    border-radius: 5px 0 0 5px;
    padding: 7px 10px 7px 10px;
    background-color: #f7f7f8;
}
#community-search #search-icon{
    display: grid;
    place-items: center;
    width: 32px;
    height: 30px;
    background-color: var(--theme-search);
    border-radius: 0 5px 5px 0;

}
#underLineSlide{
    background-color: var(--theme-fontMain);
}
#nav-right{
    display: flex;
    justify-content: space-between;
    align-items: center;

    /*background-color: #00ff1b;*/
    /*padding-left: 250px;*/
}
#nav-right #log-in_sign-up{
    display: flex;
    justify-content: space-between;
    /*background-color: red;*/

}
.button-sm{
    border: 0;
    outline: none;
}
.button-sm{
    font-size: 13px;
    font-weight: 700;
    border-radius: 5px;
    /*background-color: #53cfff;*/
    height: 30px;
    margin-left: 10px;
}
.button-sm span{
    margin: 0 7px;
}


.button-color-white{
    background-color: var(--theme-button);
    color: var(--theme-fontMain);
}
#nav-right #user-head{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    /*background-color: blueviolet;*/
}
#nav-right #user-head-icon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: #b1b1b1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
#main{
    display: flex;
    padding-top: 50px;
}
.follow-container{
    display: flex;
    cursor:pointer;
    /*justify-content: center;*/
    /*align-items: center;*/
    /*background-color: red;*/
    width: 100%;
    padding: 5px 0;
    transition: all 0.1s ease-in-out;
}
#followed{
    font-size: 15px;
    display: none;
    font-weight: 800;
    height: 30px;
    /*margin-top: 5px;*/
}

#hot{
    font-size: 15px;
    display: none;
    font-weight: 800;
    height: 30px;
    /*margin-top: 15px;*/
}

#hot span{
    color: #977bff;
}
.info{
    margin-left: 8px;
    position: absolute;
    display: flex;
    /*background-color: #977bff;*/
    flex-flow: column;
    /*align-items: center;*/

}
.info-box{
    display: none;
    align-items: center;
}
.info p{
    font-weight: 400;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
}
/*.info span{*/
/*    font-weight: 400;*/
/*    font-size: 8px;*/
/*    color: #1c1c1c;*/
/*    letter-spacing: 1px;*/
/*}*/
#more-community{
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    margin-bottom: 10px;
    /*background-color: red;*/
}

#more-community:hover{background-color: #f4f4f4;}
/*#more-community:focus{background-color: #f4002e;}*/


/*#more-community:active{*/
/*    background-color: #9e5bdf;*/
/*}*/


#login-window-box{
    width: 100%;
    height: 100vh;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}
#login-window{
    border: 0;
    outline: none;
    width: 100%;
    height: 100vh;
}
#login-box-background{
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: +2;
}
#chose{
    /*display: flex;*/
    /*flex-flow: column;*/
    /*justify-content: center;*/
    align-items: center;
    transform: translateX(115px);
    position: absolute;
}
.iconSquare{
    width: 0;
    height: 0;
    border: solid 8px transparent;
    /*border-bottom-color: white;*/
    background-color: red;
}
.iconSquare-right{
    margin-left: 40px;
}
#choseBox{
    width: 152px;
    height: 200px;
    background-color: white;
    border-radius: 6px;
    margin-top: 5px;
    margin-left: -1px;
    position: absolute;
    left: 0;
    overflow-y: auto;
}
#choseBox li{
    padding-left: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12px;
    cursor: default;
}
#choseBox li:hover{
    background-color: #b668ff;
}
#choseBox ul{
    padding-top: 10px;
}
/*#login-window{*/
/*    width: 100%;*/
/*    height: 100vh;*/
/*    display: none;*/
/*    border: 0;*/
/*    outline: none;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*}*/
/*测试*/
/*#view-box p{*/
/*    font-size: 16px;*/
/*}*/

input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    position: relative;
    height: 15px;
    width: 15px;
    border-radius: 3px;
    padding: 3px;
    /*background: url("../img/close.png") no-repeat center;*/
    background-size: 70% 70%;
    color:rgba(0,0,0,0);
}
input::-webkit-search-cancel-button:hover{
    background-color: #c1c1c1;
}





/************************************************************************************************************************************************************/




/*后续添加的公用CSS*/

body{
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*height: 100vh;*/
    /*background-color: rgba(0,0,0,0.5);*/
}
input,button{
    border-radius: 6px;
}
#login-box{
    /*width: 420px;*/
    /*height: 600px;*/
    background-color: var(--theme-bgColor-aside-nav);
    color: var(--theme-fontMain);
    border-radius: 6px;
    position: relative;
    /*overflow: hidden;*/
}
#sign-box{
    /*width: 420px;*/
    /*height: 600px;*/
    background-color: var(--theme-bgColor-aside-nav);
    color: var(--theme-fontMain);
    border-radius: 6px;
    position: relative;
    /*overflow: hidden;*/
    transition: all 0.3s ease-in-out;
}
.close-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    border-radius: 6px;
    background-color: black;
    position: absolute;
    right: 10px;
    top: 10px;

}
.padding-box{
    width: 380px;
    /*height: 560px;*/
    /*background-color: red;*/
    padding: 25px;
}
.in-box {
    width: 100%;
    height: 80px;
    /*background-color: aqua;*/
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    font-weight: 700;
}
.log-sign {
    display: flex;
    flex-flow: column-reverse;
    width: 100%;
    height:30px;
    //border-bottom: solid  1px white;
    /*background-color: #ababab;*/
}
.log-sign-box{
    display: flex;
    font-size: 16px;

}
#sign-button{
    .button{
        background-color: var(--theme-button);
        color: var(--theme-fontMain);
    }
}
#login-button{
    .button{
        background-color: var(--theme-button);
        color: var(--theme-fontMain);
    }
}
.log-sign-box .logIn{
    cursor: pointer;
    box-sizing: border-box;
}
.log-sign-box .logIn:hover{
    color: var(--theme-logIn);
}

.log-sign-box .signUp{
    cursor: pointer;
    margin-left: 20px;
    box-sizing: border-box;
}
.log-sign-box .signUp:hover{
    color: var(--theme-logIn);
}
#username-password{
    display: flex;
    flex-flow: column;
    padding: 30px 0 0 0;
    width: 100%;
    /*height: 250px;*/
    /*background-color: red;*/
}
#login-button{
    width: 100%;
    height: 40px;
    /*background-color: white;*/
    /*display: flex;*/
    align-items: center;
    padding-top: 60px;
}

#sign-button{
    width: 100%;
    height: 40px;
    /*background-color: white;*/
    /*display: flex;*/
    align-items: center;
    padding-top: 30px;
}

.button{
    width: 100%;
    height: 35px;
    border: 0;
    outline: none;
    /*background-color: #ababab;*/
}
#username-password p{
    padding-bottom: 6px;
    font-size: 13px;
}
#username-password #password {
    padding-top: 30px;
}
#username-password #username,#password{
    /*padding-top: 20px;*/
    /*background-color: #cdcdcd;*/
}
#username-password-sign{
    display: flex;
    flex-flow: column;
    padding: 30px 0;
    width: 100%;
    /*height: 250px;*/
    /*background-color: red;*/
}
#username-password-sign p{
    padding-bottom: 6px;
    font-size: 13px;
}
/*按钮颜色*/

.input-20{
    border: solid 2px transparent;
    outline: none;
    box-sizing: border-box;
    width: 20%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
}

.input-25{
    border: solid 2px transparent;
    outline: none;
    box-sizing: border-box;
    width: 25%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
}
.input-30{
    border: solid 2px transparent;
    outline: none;
    box-sizing: border-box;
    width: 30%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
}
.input-40{
    border: solid 2px transparent;
    outline: none;
    box-sizing: border-box;
    width: 40%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
}
.input-70{
    border: solid 2px transparent;
    outline: none;
    box-sizing: border-box;
    width: 70%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
    background-color: var(--theme-button);
    color: var(--theme-fontMain);
    transition: background-color 0.2s ease-in-out;
}
.input-50{
    border: solid 2px transparent;
    outline: none;
    box-sizing: border-box;
    width: 50%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
}
.input-add{
    padding-right: 30px;
}
.input-90{
    border: solid 2px transparent;
    outline: red;
    box-sizing: border-box;
    width: 90%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
}

.input-100{
    border: solid 2px transparent;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
    background-color: var(--theme-button);
    color: var(--theme-fontMain);
}
.input-10{
    border: solid 2px transparent;
    outline: red;
    box-sizing: border-box;
    width: 10%;
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
}
.flex{
    display: flex;
}
.toLeft100{
    justify-content: left;
}
.menu-width-180px{
    width: 160px;
    height: 30px;
}
.--oneLine{
    align-items: center;
}
.column-center{
    display: flex;
    align-items: center;
    flex-flow: column;
}
.column-right{
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    flex-flow: column;
}
/*选择框颜色*/

.input-20,.input-25,.input-30,.input-40,.input-100{
    transition: all 0.2s ease-in-out;
}
.cutLine{
      width: 100%;
      height: 1px;
      background-color: var(--theme-cutLine);
      margin:10px 0;
      transform: scaleY(0.5);
  }
.cutLineJust{
    width: 100%;
    height: 1px;
    background-color: #a4a4a4;
    transform: scaleY(0.5);
}
.cutLineHf{
    width: 100%;
    height: 1px;
    background-color: var(--theme-cutLine);
    margin: 15px 0;
    transform: scaleY(0.5);
}
.cutLinePlus{
    margin-top: 50px;
}
.cutLine-70{
    width: 70%;
    height: 1px;
    background-color: #a4a4a4;
    margin:10px 0;
    transform: scaleY(0.5);
}
.cutLine-thin{
    width: 100%;
    height: 1px;
    background-color: #a4a4a4;
    margin:5px 0;

}
.noClick{
    opacity: 0.6;
}
.jumpBox-sm .noClick:hover{
    background-color: transparent;
}
.jumpBox-sm .noClick:active{
    background-color: transparent;
}
.line{
    display: flex;
}
.jc-sb{
    justify-content: space-between;
}
.line-left{
    justify-content: left;
}
.line-right{
    justify-content: right;
}
.line-center{
    justify-content: center;
}
.line-between{
    justify-content: space-between;
}
.line-around{
    justify-content: space-around;
}
.padding-10{
    padding: 10px;
}
.padding-25{
    padding: 0 25px;
}
.paddingTop-30{
    padding-top: 30px;
}
.paddingTop-5{
    padding-top: 5px;
}
.margin-20{
    margin: 0 20px 20px 20px;
}
.rou{
    width: 24px;
    height: 30px;
    /*background-color: red;*/
    margin-left: 14px;
    /*justify-self: center;*/
    overflow: hidden;
}
.square{
    width: 30px;
    height: 30px;
    /*border-radius: 2px;*/
    /*background-color: #b8b8b8;*/
    margin-left: 11px;
    overflow: hidden;
}
/*#username-password-sign #username-sign,#password-sign{*/
/*    !*padding-top: 20px;*!*/
/*    !*background-color: #cdcdcd;*!*/
/*}*/

/*test*/
/*#buttontest{*/
/*    position: absolute;*/
/*    width: 500px;*/
/*    height: 500px;*/
/*}*/
#more-community-jumpBox{
    display: none;
    cursor: default;
    border-radius: 6px;
}
#user-head-jumpBox{
    top: 45px;
    right: 0;
    position: absolute;
    z-index: +9999;
    /*background-color: red;*/
    display: none;
}
#user-head-jumpBox li{
    font-size: 13px;
}

.background-color-red{
    background-color: red;
}
.background-color-tra{
    background-color: transparent;
}
.background-color-white{
    background-color: white;
}
.boxShadow-white{
    box-shadow: 0 1px 3px var(--theme-boxShadow);
}
.boxShadow-black{
    box-shadow: 0 1px 3px rgb(111, 111, 112);
}
#jumpBox-md{
    width: 40px;
    height: 40px;
}
/*#jumpBox-md li{*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    font-size: 12px;*/
/*    color: black;*/
/*    background-color: red;*/
/*}*/
.x-openIcon{
    /*background-image: url("../img/上下选择.svg");*/
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position-x: 95%;
    background-position-y: center;
}
.jumpBox-sm{
    border-radius: 6px;
    /*background-color: white;*/
    transition: all 0.2s ease-in-out;
    display: flex;
    overflow: hidden;
    background-color: var(--theme-bgColor-aside-nav);
    svg{
        fill: var(--theme-fontMain);
    }
   span{
       color: var(--theme-fontMain);
   }
}
.jumpBox-sm li{
    font-size: 12px;
    color: black;
    padding: 5px;
    border-radius: 6px;
    background-color: transparent;
    box-sizing: border-box;
    cursor: default;
}
.jumpBox-sm .darkButton{
    position: relative;
}
.jumpBox-sm .darkButton:hover{
    background-color: transparent;
}
.jumpBox-sm .darkButton:active{
    background-color: transparent;
}
.jumpBox-sm li:hover{
    background-color: var(--theme-button);

}

.jumpBox-md{
    border-radius: 6px;
    /*background-color: white;*/
    transition: all 0.2s ease-in-out;
    display: flex;
    overflow: hidden;
}
.jumpBox-md ul{
    flex-wrap: wrap;
}
.jumpBox-md li{
    font-size: 12px;
    color: black;
    padding: 5px;
    /*border-radius: 6px;*/
    background-color: transparent;
    box-sizing: border-box;
}
.jumpBox-md li:hover{
    background-color: #d2d2d2;
}
.jumpBox-md li:active{
    background-color: #a8a8a8;
}
.menuIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    /*background-color: #777777;*/
}
.rotateY180{
    transform: rotateY(180deg);
}
.toLeft-10{
    margin-right: 10px;
}
.toLeft-20{
    margin-right: 20px;
}
.toLeft-30{
    margin-right: 30px;
}
.toLeft-40{
    margin-right: 40px;
}
.toRight-4{
    margin-left: 4px;
}
.toRight-5{
    margin-left: 5px;
}
.toRight-10{
    margin-left: 10px;
}
.toRight-20{
    margin-left: 20px;
}
.toRight-40{
    margin-left: 40px;
}
.toRight-3{
    margin-left: 3px;
}
.warning{
    color: #ff5548;
    font-size: 12px;
    display: none;
    /*background-color: red;*/
    /*position: absolute;*/
    /*background-color: red;*/
    /*transform: translateY(100px);*/

}

input,textarea{
    background-color: #e9e9e9;
}

input:hover{
    border: solid 2px #7f7f7f;
}
input:focus{
    border: solid 2px #699dff;
    background-color: var(--theme-bgColor-aside-nav);
}
textarea:hover{
    border: solid 2px #7f7f7f;
}
textarea:focus{
    border: solid 2px #699dff;
    background-color: var(--theme-bgColor-aside-nav);
}
button:hover{
    filter: saturate(140%);
}
button:active{
    filter: saturate(90%);
}
/*************************************************************************************************************************/

.br-12{
    border-radius: 12px;
}

#langMenu{
    display: none;
}

.back-right-icon{
    width: 20px;
    height: 20px;
    background-color: var(--theme-button);
    position: absolute;
    right: 18px;
    display: grid;
    place-items: center;
    transform: rotateY(180deg);
    border-radius: 6px;
}
.back-right-icon:hover{
    opacity: 0.8;

}
.back-right-icon:active{
    background-color: #464646;
}
.checked{
    width: 20px;
    height: 20px;
    background-color: #979797;
    position: absolute;
    right: 18px;
    place-items: center;
    transform: rotateY(180deg);
    border-radius: 6px;
}
.enUS{
    display: none;
}
.zhCN{
    display: none;
}
.tcCN{
    display: none;
}


/**********************************************************************************************************************/

/*viewBox*/

/*.view-box {*/
/*    overflow-y: auto;*/
/*    width: 100%;*/

/*    !*display: flex;*!*/
/*    !*justify-content: center;*!*/
/*    !*!*align-items: center;*!*/
/*}*/
/*!*滚动条样式*!*/
/*.view-box::-webkit-scrollbar {*/
/*    width: 8px;*/
/*    !*height: 4px;*!*/
/*    !*background-color: #a46eff;*!*/
/*    background-color: #9149ff;*/
/*}*/
/*.view-box::-webkit-scrollbar-thumb {*/

/*    border-radius: 6px;*/
/*    !*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*!*/
/*    background-color: rgba(1,1,1,0.5);*/
/*}*/
/*.view-box::-webkit-scrollbar-thumb:hover{*/
/*    background-color: rgba(1,1,1,0.3);*/
/*}*/
/*.view-box::-webkit-scrollbar-thumb:active{*/

/*    background-color: rgba(1,1,1,0.5);*/
/*}*/
/*.view-box::-webkit-scrollbar-track {*/
/*    !*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*!*/
/*    !*border-radius: 0;*!*/
/*    !*background: rgba(0,0,0,0.1);*!*/
/*}*/
.scroll::-webkit-scrollbar {
    width: 4px;
    /*height: 8px;*/
    /*height: 4px;*/
    /*background-color: #a46eff;*/
    /*background-color: #f7f7f8;*/
}
.scroll::-webkit-scrollbar-thumb {

    border-radius: 50px;
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background-color: var(--theme-button);
}

.scroll::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    /*border-radius: 50px;*/
    /*background: rgba(0,0,0,0.1);*/
}
.lab{
    background-color: var(--theme-button);
    color: var(--theme-fontLab);
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 400;
    margin: 0 5px 5px 0;
    transition: all 0.1s ease-in-out;
}
.lab:hover{
    filter: opacity(80%);

}
.labInfo{
    background-color: #eaeaea;
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 400;
    color: black;
    margin-right: 5px;
    font-size: 14px;
    transition: all 0.1s ease-in-out;
    user-select: none;
}
.lab-hidden{
    font-size: 12px;
    /*background-color: red;*/
    padding: 1px 0;
    width: 170px;
    display: flex;
    flex-wrap: wrap;
}
.tab-hidden{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width: 170px;
}
.titleName{
    font-size: 16px;
}
.fontsize-24{
    font-size: 24px;
    color: var(--theme-fontMain);
}
.fontsize-20{
    font-size: 20px;
}
.fontsize-18{
    font-size: 18px;
}
.fontsize-16{
    font-size: 16px;
}
.fontsize-14{
    font-size: 14px;
}
.fontsize-12{
    font-size: 12px;
}

.mainColor{
    color: #ce52ff!important;
}
.widthBtn20{
    width: 5%;
}
.widthBtn40{
    width: 10%;
}
.widthBtn80{
    width: 20%;
}
.fontHid{
    text-align: left;
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.fontW800{
    font-weight: 800;
}
.gameInfoTitle{
    font-size: 38px;
}
.dot{
    margin: 0 5px;
}
.buttonInInfo{
    font-size: 18px;
    font-weight: 900;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.headImg-20{
    width: 20px;
    height: 20px;
    background-color: #474747;
    border-radius: 50%;
}
.headImg-25{
    width: 25px;
    height: 25px;
    background-color: #474747;
    border-radius: 50%;
}
.headImg-30{
    width: 30px;
    height: 30px;
    background-color: #474747;
    border-radius: 50%;
}
.headImg-35{
    width: 35px;
    height: 35px;
    background-color: #474747;
    border-radius: 6px;
}
.headImg-40{
    width: 40px;
    height: 40px;
    background-color: #474747;
    border-radius: 6px;
}
.UserName{
    font-size: 14px;
}

.square⬆{
    width: 0;
    height: 0;
    border-top: solid 0px transparent;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
    border-bottom: solid 10px white;
}
.square⬅{
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 0 transparent;
    border-right: solid 10px var(--theme-button);
    border-bottom: solid 15px transparent;
}
.el-message-box span{
    font-size: 14px;
    color: var(--theme-fontMain);
}
.el-message-box__status.el-icon-warning{
    color: var(--theme-fontMain)!important;
}
.el-message-box p{
    color: var(--theme-fontMain);
}
.el-message-box{
    background-color: var(--theme-bgColor-aside-nav);
    border: none;
    padding-bottom: 15px;
}
.el-message-box button{
    border: none;
    background-color: var(--theme-button);
    color: var(--theme-fontMain)!important;
}
.el-button--primary{
    background-color: var(--theme-button)!important;
}
.el-button--primary:hover{
    opacity: 0.9;

}
.el-message-box button:hover{
    opacity: 0.9;
    background-color: var(--theme-button);
}
.el-message-box__headerbtn{
    display: none;
}
.el-message-box__btns button:nth-child(1){
    width: 92px;
}
.el-message-box__status.el-icon-warning{
    color: black;
}
.el-carousel__container{
    position: sticky;
}
#saySpace{
    transition: all 0.2s ease-in-out;
    /*transform: scale(0);*/
    display: none;
}
.el-input--suffix .el-input__inner{
    width: 200px;
    height: 30px;
    background-color: var(--theme-button);
    font-size: 13px;
    border: none;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    outline:none;
    border-radius: 6px;
}

.el-input--suffix .el-input__inner:hover{
    border: solid 2px #7f7f7f;
}
.el-select .el-input .el-select__caret{
    display: flex;
    align-items: center;
    justify-content: center;
}
.el-message-box__wrapper{
    backdrop-filter: blur(10px);
    /*background: rgba(255, 255, 255, 0.1);*/
}
.updateInfo{
    display: none;
}
.updateInfo_{
    display: none;
}
.mainSayBack{
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    z-index: +1;
}
.el-aside{
    background-color: var(--theme-bgColor-aside-nav);
}
.el-submenu__title{
    background-color: var(--theme-bgColor-aside-nav);
    color: var(--theme-fontMain);
}
.el-submenu__title:hover{
    background-color: var(--theme-button);
}
.el-submenu .el-menu-item{
    background-color: var(--theme-bgColor-aside-nav);
}
.el-submenu .el-menu-item:hover{
    background-color: var(--theme-button);
}
.el-menu-item-group__title{
    background-color: var(--theme-bgColor-aside-nav);

}
.el-table--striped .el-table__body tr.el-table__row--striped td,.el-table--enable-row-transition .el-table__body td{
    background-color: var(--theme-bgColor-aside-nav);
}
.el-table th, .el-table tr{
    background-color: var(--theme-bgColor-aside-nav);
}
.el-table .cell{
    color: var(--theme-fontMain);
}
.hover-row{
    background-color: red;
}
.el-table td, .el-table th.is-leaf{
    border-bottom: 1px solid var(--theme-cutLine);
}
.el-table--border::after, .el-table--group::after, .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
    background-color: var(--theme-cutLine);
}

//.el-table tbody tr:hover>td {
//    background-color: transparent;
//}

.el-table thead.is-group th{
    background-color: var(--theme-bgColor-aside-nav);
}
.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border-right: 1px solid var(--theme-cutLine);
}
.el-table--border th, .el-table__fixed-right-patch{
    border-bottom: 1px solid var(--theme-cutLine);
}
.el-table--border, .el-table--group{
    border: 1px solid var(--theme-cutLine);
}
.el-table__empty-text{
    color: var(--theme-fontMain);
}
.el-menu{
    border-right: solid 1px var(--theme-bgColor-aside-nav);
}
.el-message--success{
    background-color: var(--theme-bgColor-aside-nav);
    border-radius: 6px;
    border: none;
    box-shadow: 0 1px 3px var(--theme-boxShadow);

}

.el-message--warning{
    background-color: var(--theme-bgColor-aside-nav);
    border-radius: 6px;
    border: none;
    box-shadow: 0 1px 3px var(--theme-boxShadow);
}

.el-message--error{
    background-color: var(--theme-bgColor-aside-nav);
    border-radius: 6px;
    border: none;
    box-shadow: 0 1px 3px var(--theme-boxShadow);
}

.el-input--suffix .el-input__inner{
    color: var(--theme-fontMain);
}
.el-input__inner{
    background-color: var(--theme-button);
    color: var(--theme-fontMain);
}